<template>
    <div class="card">
        <div class="card-body">
            <div v-for="post in posts.posts" :key="post.idx">
                <div class="card single-post">
                    <div class="card-body">
                        {{ post.content }}
                        
                        <button @click="delete_a_post(post.id, post.idx)" v-if="is_me" type="button" class="btn btn-danger btn-sm">删除</button>
                        <button v-if="is_me" type="button" class="btn btn-primary btn-sm modify_btn" data-bs-toggle="modal" :data-bs-target="'#update-post-btn-' + post.idx">修改</button>

                        <div class="modal fade" :id="'update-post-btn-' + post.idx" tabindex="-1">
                            <div class="modal-dialog modal-xl">
                                <div class="modal-content">
                                <div class="modal-header">
                                    <h1 class="modal-title fs-5" id="exampleModalLabel">修改帖子</h1>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <div class="mb-3">
                                        <label for="update-post-content" class="form-label"></label>
                                        <textarea class="form-control" id="update-post-content" rows="5" v-model="new_content" placeholder="在这里修改帖子~"></textarea>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <div class="error-message"></div>
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                    <button type="button" @click="update_a_post(post.id, post.idx)" class="btn btn-primary">提交</button>
                                </div>
                                </div>
                            </div>
                            </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { computed} from 'vue';
import { useStore } from 'vuex';
import $ from 'jquery';
import { ref} from 'vue';
import { Modal } from 'bootstrap/dist/js/bootstrap';

export default {
    name: "UserProfilePosts",
    props: {
        posts: {
            type: Object,
            required: true,
        },
        user: {
            type: Object,
            required: true,
        }
    },
    setup(props, context) {
        const store = useStore();
        let is_me = computed(() => store.state.user.id === props.user.id);
        let new_content = ref('');



        const delete_a_post = (post_id, post_idx) => {
            $.ajax({
                url: "http://127.0.0.1:3005/myspace/deletepost/",
                type: "DELETE",
                data: {
                    post_id,
                },
                headers: {
                    'Authorization': "Bearer " + store.state.user.token,
                },
                success(resp) {
                    console.log(resp);
                    if (resp.error_message === "success") {
                        context.emit('delete_a_post', post_id, post_idx);
                    }
                }
            })
        }

        const update_a_post = (post_id, post_idx)  => {
            $.ajax({
                url: "http://127.0.0.1:3005/myspace/updatepost/",
                type: "post",
                data: {
                    post_id: post_id,
                    content: new_content.value,
                },
                headers: {
                    'Authorization': "Bearer " + store.state.user.token,
                },
                success(resp) {
                    if(resp.error_message === 'success') {
                        new_content.value = '';
                        Modal.getInstance('#update-post-btn-' + post_idx).hide();
                        context.emit('update_a_post');
                    }
                }
            });
        }

        return {
            is_me,
            delete_a_post,
            update_a_post,
            new_content,
        }
    }
}
</script>


<style scoped>
.single-post {
    margin-bottom: 10px;
}

button {
    float: right;
}

.modify_btn {
    margin-right: 10px;
}

.error-message {
    color: red;
}
</style>